<template>
  <view class="section-h section-v">
    <view class="flex-h flex-h--vertical-center flex-h--space-between">
      <text class="page-title text-size-1">健康调查问卷</text>
      <text class="text-size-4"
        >{{ question.seq }}/{{ this.totalQuestionCount }}</text
      >
    </view>
    <text class="h3"
      ><text v-if="questionItem.type === 'radio'">单选题</text
      ><text v-if="questionItem.type === 'checkbox'">多选题</text
      >：请在下列答案中选择一项和您情况最相符的</text
    >
    <view class="section-v">
      <view class="flex-h flex-h--vertical-center">
        <text class="text-size-2">{{ question.seq }}</text>
        <view class="padding-r--normal"></view>
        <text class="h3 question-title">{{ questionItem.title }}</text>
      </view>
      <template v-for="option in questionItem.options">
        <text
          class="option"
          :key="option.seq"
          :class="{ 'option--selected': isOptionSelected(option) }"
          @tap="answerClick(option)"
        >
          {{ option.content }}
        </text>
        <textarea
          v-if="option.other && isOptionSelected(option)"
          :key="option.seq + 'textarea'"
          class="option-textarea"
          :value="questionItem.other"
          placeholder="若不清楚，可输入无"
          @blur="onChangeQuestionItemOther"
        />
      </template>
    </view>
    <HomeFab />
  </view>
</template>

<script>
import { QuestionOption } from "../../types";
import HomeFab from "../../common-components/fab/index.vue";
import Vue from "vue";

export default {
  components:{
    HomeFab,
  },
  props: {
    question: {
      default: null,
      type: Object
    },
    totalQuestionCount: {
      type: Number,
      default: 10
    },
    selectedQuestionnaireItems: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {};
  },
  computed: {
    // 后端传递进来没有other字段，因此针对每一项生成一个ohter字段，绑定输入框输入的值
    questionItem() {
      return {
        ...this.question,
        other: this.questionItemOther
      };
    },
    questionItemOther() {
      const selectedQuestionnaireItem = this.selectedQuestionnaireItems.find(
        item => item.id === this.question.id
      );
      return selectedQuestionnaireItem ? selectedQuestionnaireItem.other : "";
    }
  },
  methods: {
    answerClick(option: QuestionOption) {
      this.$emit("onAnswer", option);
    },
    isOptionSelected(option: QuestionOption) {
      const selectedQuestionnaireItem = this.selectedQuestionnaireItems.find(
        item => item.id === this.question.id
      );
      if (
        !selectedQuestionnaireItem ||
        !selectedQuestionnaireItem.selectedOptions
      ) {
        return false;
      }
      return !!selectedQuestionnaireItem.selectedOptions.find(
        o => o.id === option.id
      );
    },
    onChangeQuestionItemOther(value: string) {
      Vue.set(this.questionItem, "other", value.detail.value);
      const index = this.selectedQuestionnaireItems.findIndex(
        item => item.id === this.questionItem.id
      );
      Vue.set(this.selectedQuestionnaireItems, index, this.questionItem);
    }
  }
};
</script>

<style lang="less">
@import "../../styles/colors";

.page-title {
  display: block;
  padding: 48px 0;
}

.question-title {
  padding: 48px 0;
}

.option {
  display: block;
  padding: 12px;
  text-align: center;
  margin: 32px 0;
  border: 1px solid @purple100;
  color: @purple100;
  border-radius: 100px;
}

.option--selected {
  background: @purple100;
  color: white;
}

.option-textarea {
  background-color: #fff;
  border: 1px solid @purple100;
  border-radius: 20rpx;
  padding: 10rpx;
  min-height: 160rpx;
  width: 100%;
  box-sizing: border-box;

  &-disabled {
    color: #c4c4c4;
    background: #e5e5e5;
    border: 1px solid #c4c4c4;
  }
}
</style>
